<template>
  <!-- 创建否定关键词投放 -->
  <div class="choose-keyword-w">
    <div class="head">否定关键词投放</div>
    <div class="choose-product-con flex">
      <div class="choose-list">
        <div class="flex-c" style="margin-bottom: 10px">
          <span>匹配类型：</span>
          <a-radio-group :disabled="isDisabled" v-model="keywordType">
            <a-radio value="NEGATIVE_EXACT">否定精准</a-radio>
            <a-radio value="NEGATIVE_PHRASE">否定词组</a-radio>
          </a-radio-group>
        </div>
        <a-textarea v-model="keywordVal" :disabled="isDisabled" placeholder="输入关键词，一行一个" allow-clear :style="{ height: height }" />
        <div class="flex-c-sb">
          <p>不得包含特殊字符，如@、#、*、$、/等</p>
          <a-button size="mini" type="primary" v-if="!isDisabled" @click="addKeywordByKeyword">添加</a-button>
        </div>
      </div>
      <div class="checked-list">
        <p style="margin-bottom: 10px">已否定{{ editSpCampaignInfo.negativeKeywordInfos.length }}个关键词</p>
        <a-table size="mini" class="table-normal-line" :pagination="false" :scroll="{ y: 230 }" :data="editSpCampaignInfo.negativeKeywordInfos">
          <template #columns>
            <a-table-column title="关键词" data-index="negativeKeyword" />
            <a-table-column title="匹配类型" data-index="negativeKeyword">
              <template #cell="{ record }">
                <p>{{ NegativeKeywordMatchType[record.negativeKeywordMatchType] }}</p>
              </template>
            </a-table-column>
            <a-table-column data-index="negativeKeyword" :width="100" align="right">
              <template #title>
                <p class="highlight cursor" @click="editSpCampaignInfo.negativeKeywordInfos = []" v-if="!isDisabled">删除所有</p>
              </template>
              <template #cell="{ rowIndex }">
                <icon-close-circle class="cursor" style="font-size: 16px" @click="deleteKeyword(rowIndex)" v-if="!isDisabled" />
              </template>
            </a-table-column>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, computed } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { NegativeKeywordMatchType, DraftFinishStep } from '../../types'
  const props = defineProps({
    darftInfo: {
      type: Object,
      default: () => {},
    },
    defaultVal: {
      type: String,
    },
    height: {
      type: String,
      default: '240px',
    },
  })
  onMounted(() => {
    // 有草稿箱
    if (props.darftInfo?.draftId) {
      editSpCampaignInfo.value.negativeKeywordInfos = props.darftInfo?.negativeKeywordInfos || []
    }
  })
  const keywordType = ref('NEGATIVE_EXACT')
  const editSpCampaignInfo = ref<any>({
    negativeKeywordInfos: [],
  })
  const keywordVal = ref(props.defaultVal)
  // 根据当前流程节点判断是否可编辑
  let isDisabled = computed(() => {
    let handlerFlow = props.darftInfo?.handlerFlow || 'INIT'
    let level = DraftFinishStep[handlerFlow]
    return Number(level) > 6 ? true : false
  })
  // 添加关键词
  function addKeyword(list: Array<any>) {
    // 去重
    list.forEach((el: any) => {
      let _index = editSpCampaignInfo.value.negativeKeywordInfos.findIndex((item: any) => item.negativeKeyword == el.negativeKeyword && item.negativeKeywordMatchType == el.negativeKeywordMatchType)
      if (_index == -1) {
        editSpCampaignInfo.value.negativeKeywordInfos.push(el)
      }
    })
  }
  // 输入关键词添加
  async function addKeywordByKeyword() {
    if (!keywordVal.value) {
      Message.error('请输入关键词')
      return
    }
    const reg = new RegExp('[~!@#$^&*=《》?！@#￥&*{}【】‘；：。，、？]')
    if (reg.test(keywordVal.value)) {
      Message.error('不得包含特殊字符，如@、#、*、$、/等')
      return
    }
    let keywords = keywordVal.value.split('\n')
    keywords = keywords.filter((el: string) => el?.trim())
    if (!keywords.length) return
    let list = keywords.map((val: string) => {
      return {
        negativeKeyword: val,
        negativeKeywordMatchType: keywordType.value,
      }
    })
    addKeyword(list)
    keywordVal.value = ''
  }
  // 刪除产品
  function deleteKeyword(i: number) {
    editSpCampaignInfo.value.negativeKeywordInfos.splice(i, 1)
  }
  // 校验信息
  async function validateData() {
    return true
  }
  // 设置需要创建的数据
  function setCreateData() {
    console.log(editSpCampaignInfo.value.negativeKeywordInfos)
    return {
      negativeKeywordInfos: editSpCampaignInfo.value.negativeKeywordInfos,
    }
  }
  defineExpose({ validateData, setCreateData })
</script>
<style lang="less" scoped>
  .edit-header {
    background-color: var(--color-fill-2) !important;
    border-left: 2px solid rgb(var(--primary-6));
    line-height: 32px;
    font-size: 16px;
    margin-bottom: 20px;
    padding-left: 20px;
  }
  .choose-keyword-w {
    border: 1px solid var(--color-border);
    .head {
      padding: 6px 20px;
      border-bottom: 1px solid var(--color-border);
    }
    .choose-list {
      padding: 10px 20px;
      width: 50%;
      border-right: 1px solid var(--color-border);
    }
    .checked-list {
      padding: 10px 20px;
      flex: 1;
    }
  }
</style>
